<template>
  <div class="pro_info">
    <div class="top">
      <div class="left">
        <div class="kuang" id="main">
        </div>
      </div>
      <div class="right">
        <div class="kuang" id="pie">
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="kuang" id="zexian">
        </div>
      </div>
      <div class="right">
        <div class="kuang"  id="diqiu">

        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { onMounted } from 'vue'
import *  as echarts from 'echarts'
import 'echarts-gl'
import {selectAllList} from "../../api/Second"

const pageNum =ref(1)
const pageSize =ref(100)

var option = {
  title: {
    text: '学院人数占比'
  },
  tooltip: {},
  legend: {
    data: ['人数']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '人数',
      type: 'bar',
      data: []
    }
  ],
};
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  var myChart1 = echarts.init(document.getElementById('pie'));
  var myChart2 = echarts.init(document.getElementById('zexian'));
  var myChart3 = echarts.init(document.getElementById('diqiu'));
  var ROOT_PATH = 'https://echarts.apache.org/examples';
      // 指定图表的配置项和数据
  var option = {
    title: {
      text: '学院人数对比'
    },
    tooltip: {},
    legend: {
      data: ['人数']
    },
    xAxis: {
      axisLabel: {
        fontSize:9// 设置x轴字体大小为
      },
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '人数',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
     var  option2 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '人数',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      };
     var option3 = {
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize:9// 设置x轴字体大小为
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

     var  option4 = {
        backgroundColor: '#000',
        globe: {
          baseTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
          heightTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
          displacementScale: 0.04,
          shading: 'realistic',
          environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
          realisticMaterial: {
            roughness: 0.9
          },
          postEffect: {
            enable: true
          },
          light: {
            main: {
              intensity: 5,
              shadow: true
            },
            ambientCubemap: {
              texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
              diffuseIntensity: 0.2
            }
          }
        }
      };
  function loadTableData() {
    selectAllList(pageNum.value, pageSize.value).then(res => {
      console.log(res);
      let xfNum = 0
      let rjNum = 0
      let jrNum =0
      let kjNum =0
      let csNum=0
        Array.from(new Set(res.data.data.list.map(v => {
        if(v.college === "讯飞人工智能学院"){
          xfNum++
        }
        if(v.college === "软件学院"){
          rjNum++
        }
        if(v.college === "金融学院"){
            jrNum++
          }
          if(v.college === "会计学院"){
            kjNum++
          }
          if(v.college === "测试学院"){
            csNum++
          }
      })))
      option.xAxis.data = []
      option3.xAxis.data = []
      option.xAxis.data.push('讯飞人工智能学院','软件学院','金融学院','会计学院','测试学院')
      option3.xAxis.data.push('讯飞人工智能学院','软件学院','金融学院','会计学院','测试学院')
      option.series[0].data = []
      option.series[0].data.push(xfNum)
      option.series[0].data.push(rjNum)
      option.series[0].data.push(jrNum)
      option.series[0].data.push(kjNum)
      option.series[0].data.push(csNum)
      option2.series[0].data = []
      option2.series[0].data.push({value: xfNum,name: '讯飞人工智能学院'})
      option2.series[0].data.push({value: rjNum,name: '软件学院'})
      option2.series[0].data.push({value:kjNum,name: '会计学院'})
      option2.series[0].data.push({value:csNum,name: '测试学院'})
      option2.series[0].data.push({value:jrNum,name: '金融学院'})
      option3.series[0].data = []
      option3.series[0].data.push(xfNum,rjNum,kjNum,csNum,jrNum)
      console.log(xfNum)
      console.log(rjNum)
      myChart.setOption(option);
      myChart1.setOption(option2);
      myChart2.setOption(option3);
      myChart3.setOption(option4);
    })
  }
  loadTableData()
}
);
</script>

<style scoped>
.pro_info {
  position: relative;
  width: 100%;
  min-height: 100%;
}
.pro_info .top {
  width: 100%;
  height: 50%;

}
.pro_info .bottom {
  width: 100%;
  height: 50%;
}

.left {
  width: 50%;
  height: 100%;
  float: left;
}

.right {
  float: left;
  width: 50%;
  height: 100%;
}

.kuang{
  background-color: #dddddd;
  position: relative;
  width: 96%;
  height: 96%;
  margin: 2%;
  border-radius: 20px;
  display: flex;
}

</style>